<template>
  <view class="detail">
    <view v-if="loadState">
      <view class="title">{{detail.title}}</view>
      <view class="info">
        <text>{{detail.author}}</text>
        <uni-dateformat :date="detail.publish_date" format="yyyy年MM月dd日 hh:mm:ss"></uni-dateformat>
      </view>
      <view class="picurls" v-if="detail.thumbnail && detail.thumbnail.length===1">
        <image v-for="(item,index) in detail.thumbnail" :key="index" :src="item" mode="widthFix"
          @click="previewImg(detail.thumbnail,index)"></image>
      </view>
      <view class="content" v-for="(item,index) in detail.content.ops" :key="index" :style="[item.attributes]">
        {{item.insert}}
      </view>

      <view class="picurls" v-if="detail.thumbnail && detail.thumbnail.length>1">
        <image v-for="(item,index) in detail.thumbnail" :key="index" :src="item" mode="widthFix"
          @click="previewImg(detail.thumbnail,index)"></image>
      </view>

      <!--    <view class="btnGroup">
        <button size="mini" @click="goEdit">修改</button>
        <button size="mini" type="warn" @click="onRemove">删除</button>
      </view> -->
    </view>

    <view v-else>
      <uni-load-more status="loading"></uni-load-more>
    </view>


  </view>
</template>

<script>
  let id;
  export default {
    data() {
      return {
        detail: {},
        loadState: false
      };
    },
    onLoad(e) {
      id = e.id
    },
    onShow() {
      this.getDetail();
    },
    methods: {
      //预览图片
      previewImg(item, index) {
        uni.previewImage({
          current: index,
          urls: item
        })
      },
      //获取详情
      getDetail() {
        uniCloud.callFunction({
          name: "article",
          data: {
            flag: 2,
            id
          }
        }).then(res => {
          this.detail = res.result.data[0]
          console.log(this.detail, 'detail');
          this.loadState = true
          uni.setNavigationBarTitle({
            title: this.detail.title
          })
        }).catch(() => {
          uni.showToast({
            icon: "error",
            title: "文章内容加载有误···"
          })
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/index/index"
            })
          }, 800)

        })
      }
    }

  }
</script>

<style lang="scss" scoped>
  .detail {
    padding: 30rpx;

    .title {
      font-size: 50rpx;
      color: #000;
      text-align: justify;
      line-height: 1.4em;
    }

    .info {
      font-size: 30rpx;
      color: #666;
      padding: 30rpx 0 60rpx;

      text {
        padding-right: 30rpx;
      }
    }

    .content {
      text-indent: 2em;
      font-size: 36rpx;
      line-height: 1.7em;
    }

    .picurls {
      padding-top: 50rpx;

      image {
        width: 100%;
        display: block;
        margin-bottom: 30rpx;
      }
    }

    .btnGroup {
      padding: 50rpx 0;

      button {
        margin-right: 30rpx;
      }
    }
  }
</style>